<template>
    <div class="son">
        <p>name:{{user.name}}</p>
        <p>age:{{user.age}}</p>
    </div>
</template>
<script setup>
    import { watch, toRefs } from 'vue'

    const props = defineProps({
        user: {
            type: Object,
            default: () => {},
        },
    });
    // 在使用ref定义响应式状态时，如果传递了一个对象作为参数，那么在使用watch()监听这个对象的变化时，根据这个对象的更新方式，watch()会有不同的反应。

    // props.user 相当于监听user里的属性变化，但user对象本身每次都在变化，watch监听的是原来的对象

    // 方法一： () => props.user 函数形式可解决，当函数的依赖发送变化时，watch就会重新执行。

    // 方法二： const { user } = toRefs(props); 直接监听user，因为这时监听的时ref的value属性，user ref本身不会改变，变化的是value这个属性的值。

    // 如果修改的是user对象里面的某个属性，直接监听user是可以触发watch的，因为user的引用没有变化，当修改了部分属性时就会触发watch。

    // const { user } = toRefs(props);

    watch(
        // user,
        props.user,
        // () => props.user,
        (newVal, oldVal) => {
            console.log(newVal, oldVal)
        }
    )
</script>

    